Skip to main content

Icons

How to replace​

You can replace any built-in icon in dxchart5-react with your own.

To do so, pass an IconsConfig object to the uiOverrides prop of ChartReactApp.

Type reference – the complete list of icon keys is exported as
IconsConfig from
@dx-private/dxchart5-react/dist/config/icons/icons-config

Below is a demo in which several icons are intentionally replaced by the same ArrowIcon:

import React from 'react';
import { ChartReactApp } from '@dx-private/dxchart5-react/dist/chart/chart-react-app';
import { CREATE_MOCK_PROVIDERS } from '@dx-private/dxchart5-react-mock-providers/dist';
const arrowIcon = (
    <svg width="7" height="4" viewBox="0 0 7 4" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path fillRule="evenodd" clipRule="evenodd" d="M0 0L3.476 4L7 0H0Z" fill="currentColor" />
    </svg>
);
export const iconsConfig = {
    selectBox: {
        arrow: arrowIcon,
    },
    chartTypes: {
        candle: arrowIcon,
    },
    toolbar: {
        chartSettings: arrowIcon,
    },
};
export const ChartReactAppWithCustomIcons = () => {
    return <ChartReactApp uiOverrides={{ icons: iconsConfig }} dependencies={{ ...CREATE_MOCK_PROVIDERS() }} />;
};

Live demo​

Quick hint​

To discover the name of an icon, open your browser’s DevTools and look for the data-icon-name attribute.

<span data-icon-name="HollowCandles" />

API reference​

The full IconsConfig declaration lives at
@dx-private/dxchart5-react/dist/config/icons/icons-config#IconsConfig.